<template>
	<view>
		<uni-section  titleColor="#ff0000"  subTitleColor="#ff0000" title="距离活动开始"  padding v-if="sore=='1'">
			<template v-slot:decoration>
			   <view class="decoration"></view>
			</template>
			<uni-countdown :font-size="15" :day="day" :hour="hour" :minute="minute" :second="second" color="#ffffff"
				background-color="#ff0000" />
		</uni-section>
		<uni-section titleColor="#ff0000"  subTitleColor="#ff0000" title="距离活动结束"  padding v-if="sore=='2'">
			<template v-slot:decoration>
			   <view class="decoration"></view>
			</template>
			<uni-countdown :font-size="15" :day="day" :hour="hour" :minute="minute" :second="second" color="#FFFFFF"
				background-color="#ff0000" />
		</uni-section>
		<uni-section titleColor="#ff0000"  subTitleColor="#ff0000" title="活动已经结束"  padding v-if="sore=='3'">
			<template v-slot:decoration>
			   <view class="decoration"></view>
			</template>
			<uni-countdown :font-size="15" :day="day" :hour="hour" :minute="minute" :second="second" color="#FFFFFF"
				background-color="#ff0000" />
		</uni-section>
		<uni-card :title="activeDetail.activeTitle" :sub-title="activeDetail.teamName"
			:extra="'发起人:'+activeDetail.createBy" :thumbnail="imageList[0]" @click="onClick">
			<text class="uni-body">
				<view class="example-body">
					时间：
					<uni-dateformat :date="activeDetail.startTime" format="MM/dd hh:mm"></uni-dateformat>
					~
					<uni-dateformat class="dateblock" :date="activeDetail.endTime" format="MM/dd hh:mm">
					</uni-dateformat>
					<!-- <view>
              内容：{{activeDetail.description}}
            </view> -->
					<view>
						活动地址：{{activeDetail.address}}
					</view>

				</view>
			</text>
		</uni-card>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		
		
		<!-- 底部分栏 -->
		<view class="content">
			<view v-if="current === 0">
				<text class="content-text">
					<uni-row class="row">
						<span class="col-1">参与方式:</span>
						<span class="col-2">现场参与</span>
					</uni-row>
					<uni-row class="row">
						<span class="col-1">定位签到:</span>
						<span class="col-2">不支持</span>
					</uni-row>
					<uni-row class="row">
						<span class="col-1">签退情况:</span>
						<span class="col-2">现场签退</span>
					</uni-row>
					<uni-row class="row">
						<span class="col-1">活动对象:</span>
						<span class="col-2">全部</span>
					</uni-row>
					<uni-row class="row">
						<span class="col-1">联系方式:</span>
						<span class="col-2">13155593779</span>
					</uni-row>
					<uni-row class="row">
						<span class="col-1">归属组织:</span>
						<span class="col-2 teamName">{{activeDetail.teamName}}</span>
					</uni-row>
					<view class="photo_view">
						<image :src="imageList[0]"></image>
					</view>
				</text>
			</view>
			<view v-if="current === 1">
				<text class="content-text">
					<view class="top">
						<view class="descr">
							简介:
						</view>
						<view class="descr_content" v-if="activeDetail.description==null">
							暂无内容！
						</view>
						<view class="descr_content" v-else>
							{{activeDetail.description}}
						</view>
					</view>
					<view class="bottom">
						<view class="descr">
							成员:
						</view>
						<view class="userinfo" v-if="list.length>=5||list.length==3">
							<uni-grid :column="3" :highlight="true">
								<uni-grid-item v-for="(item, index) in list" :index="index" :key="item.userId">
									<view class="grid-item-box">
										<image :src="item.avatar" class="image" mode="aspectFill" />
										<text class="text">{{ item.userName }}</text>
									</view>
								</uni-grid-item>
							</uni-grid>
						</view>
						<view class="userinfo" v-if="list.length==1">
							<uni-grid :column="list.length" :highlight="true">
								<uni-grid-item class="grid-item1" v-for="(item, index) in list" :index="index"
									:key="item.userId">
									<view class="grid-item-box1">
										<image :src="item.avatar" class="image" mode="aspectFill" />
										<text class="text">{{ item.userName }}</text>
									</view>
								</uni-grid-item>
							</uni-grid>
						</view>
						<view class="userinfo" v-if="list.length==2">
							<uni-grid :column="list.length" :highlight="true">
								<uni-grid-item class="grid-item2" v-for="(item, index) in list" :index="index"
									:key="item.userId">
									<view class="grid-item-box2">
										<image :src="item.avatar" class="image" mode="aspectFill" />
										<text class="text">{{ item.userName }}</text>
									</view>
								</uni-grid-item>
							</uni-grid>
						</view>
						<view class="userinfo" v-if="list.length==4">
							<uni-grid :column="list.length" :highlight="true">
								<uni-grid-item class="grid-item3" v-for="(item, index) in list" :index="index"
									:key="item.userId">
									<view class="grid-item-box3">
										<image :src="item.avatar" class="image" mode="aspectFill" />
										<text class="text">{{ item.userName }}</text>
									</view>
								</uni-grid-item>
							</uni-grid>
						</view>
					</view>
				</text>
			</view>
		</view>

		<view class="buttonBox">
			<button class="button" type="primary" @click="managerActive"
				v-if="(isManger=='管理员')&&(sore==1)&&(isJoin=='已进入')">
				管理
			</button>

			<button class="button popup-warn " type="primary" @click="dialogToggle('error')"
				v-if="(isJoin=='已进入')&&(isManger!='管理员')&&(sore==1)">
				退出
			</button>

			<button class="button popup-success " type="primary" @click="joinActive" v-if="isJoin=='退出'&&(sore==1)">
				加入
			</button>

			<button class="button  popup-info " type="primary" v-if="sore==3||sore==2" disabled>
				不可操作
			</button>
		</view>


		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="返回" confirmText="退出" title="提示" content="真的要退出吗？"
					@confirm="dialogConfirm(activeDetail.activeId)" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>

		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		getOneMyJoinActive,
		exitOneMyJoinActive,
		JoinActive
	} from '@/api/active/active.js'

	export default {
		onShow: function() { //option为object类型，会序列化上个页面传递的参数
			getOneMyJoinActive(this.$route.query.id).then((Response) => {
				this.activeDetail = Response.activeInformation
				this.list = Response.activeUserList
				this.photo = this.activeDetail.photo
				this.imageList = this.activeDetail.photo.split(',')
				this.isManger = Response.category
				this.isJoin = Response.join
				console.log(Response);
				console.log(this.isManger);
				console.log(this.isJoin);
				// 距离活动初始化
				if (new Date(this.activeDetail.startTime).getTime() > new Date().getTime()) {
					//距离活动开始时间 当前时间小于活动开始时间
					this.happenTimeFun(new Date(this.activeDetail.startTime), new Date())
					this.sore = "1"
				}
				if ((new Date(this.activeDetail.endTime).getTime() > new Date().getTime()) && new Date(this
						.activeDetail.startTime).getTime() < new Date().getTime()) {
					//距离活动结束时间 当前时间小于活动结束时间
					this.happenTimeFun(new Date(this.activeDetail.endTime), new Date())
					this.sore = "2"
				}
				if ((new Date(this.activeDetail.endTime).getTime() < new Date().getTime()) && (new Date(this
						.activeDetail.startTime).getTime() < new Date().getTime())) {
					this.happenTimeFun(new Date(this.activeDetail.endTime), new Date())
					this.sore = "3"
					this.isDisabled = true
				}
			})
		},

		data() {
			return {
				imageList:[],
				timer: null, //定时器名称
				activeDetail: Object,
				list: [],
				sore: "",
				isDisabled: false,
				msgType: 'success',
				messageText: '这是一条成功提示',
				day: "0",
				hour: "0",
				minute: "0",
				second: "0",
				photo: "",
				isManger: "",
				isJoin: "",
				items: ['信息', '详情'],
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				colors: ['#ff0000'],
				current: 0,
				colorIndex: 0,
				activeColor: '#ff0000',
				styleType: 'button'
			};
		},
		methods: {
			onClick() {

			},
			back() {

			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			happenTimeFun(time1, time2) { //时间戳数据处理
				let time11 = time1.getTime();
				let time22 = time2.getTime();
				let date;
				if (time11 > time22) {
					date = new Date(time11 - time22);
				} else {
					date = new Date(time22 - time11);
				}
				const [hour, min, sec] = date.toUTCString().split(" ")[4].split(":")
				const day = date.toUTCString().split(" ")[1] - 1
				this.day = parseInt(day)
				this.hour = parseInt(hour)
				this.minute = parseInt(min)
				this.second = parseInt(sec)
			},
			managerActive() {
				this.$tab.navigateTo('/pages/work/ManagerActive/ManagerActive?id=' + this.activeDetail.activeId)
			},
			joinActive() {
				console.log(1);
				JoinActive(this.activeDetail.activeId).then(Response => {

					console.log(Response)
					if (Response.code == 200) {
						uni.showToast({
							title: Response.msg
						})
						setTimeout(() => {
							let pages = getCurrentPages(); // 当前页面
							let beforePage = pages[pages.length - 1]; // 上一页
							uni.navigateBack({
								success: function() {
									beforePage.onLoad(); // 执行上一页的onLoad方法
								}
							})
						}, 1000)
					} else if (Response.code != 200) {
						uni.showToast({
							title: '加入失败'
						})
					}
				})
			},
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			dialogConfirm(id) {
				console.log('点击确认' + '活动id是' + id)
				this.messageText = `成功退出该活动！`
				this.$refs.message.open()
				setTimeout(function() {
					exitOneMyJoinActive(id).then((Response) => { //退出活动     
						console.log(Response);
						let pages = getCurrentPages(); // 当前页面
						let beforePage = pages[pages.length - 1]; // 上一页
						uni.navigateBack({
							success: function() {
								beforePage.onLoad(); // 执行上一页的onLoad方法
							}
						})
					})
				}, 1500);
			},
			dialogClose() {
				console.log('点击关闭')
			},
		},
	}
</script>

<style lang="scss">
	.photo_view {
		margin-top: 25px;
		width: 340px;
		height: 240px;
		// border:1px solid #ff0000 ;
		box-shadow: 0 0 2px 2px #f9fcff;
		padding:10px ;
		background-color: #fff;
	}
	.photo_view image {
		width: 100%;
		height: 100%;
	}
	
	.decoration{
	    width: 6px;
	    height: 6px;
		margin-right: 4px;
		border-radius: 50%;
		background-color: #ff0000;
	  }
	
	.userinfo {

		padding-top: 10px;

	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box1 {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.grid-item1 {
		width: 100px !important;
		height: 100px !important;
	}

	.grid-item2 {
		width: 100px !important;
		height: 100px !important;
	}

	.grid-item3 {
		width: 100px !important;
		height: 100px !important;
	}

	.grid-item-box3 {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.grid-item-box2 {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.image {
		width: 40px;
		height: 40px;
		border-radius: 20px;
	}

	.text {
		font-size: 14px;
		color: #000;
		margin-top: 5px;
	}

	.bottom {
		padding-right: 30px;
		margin-top: 20px;
		height: 160px;
		margin-bottom: 20px;
	}

	.popup-warn {
		color: #fff;
		background-color: #ff0000;
	}

	.popup-success {
		color: #fff;
		background-color: #00ff00;
	}

	.dateblock {
		margin-right: 6rem;
	}

	.uni-common-mt {
		margin-top: 30px;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	}

	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		// justify-content: center;
		padding-left: 30px;
		padding-top: 30px;
		// height: 300px;
		text-align: center;
	}

	.content-text {
		font-size: 14px;
		color: #666;
	}

	.col-1 {
		font-weight: bold;
		width: 50px;
		margin-right: 15px;
	}

	.col-2 {
		display: inline-block;
		width: 120px;
		text-align: left;
	}
	.teamName {
		
	}
	.row {
		margin-bottom: 7px;
	}

	.buttonBox {}

	.button {
		position: fixed;
		right: 0;
		bottom: 5px;
		left: 0;
		z-index: 99;
		width: 200px;
		height: 30px;
		line-height: 30px;
		text-align: center;
	}

	.descr {
		font-size: 16px;
		font-weight: bold;
		text-align: left;
	}

	.descr_content {
		padding-top: 10px;
		padding-right: 30px;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		/* 将对象作为弹性伸缩盒子模型显示 */
		display: -webkit-box;
		/* 限制在一个块元素显示的文本的行数 */
		/* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
		-webkit-line-clamp: 4;
		/* 设置或检索伸缩盒对象的子元素的排列方式 */
		-webkit-box-orient: vertical;
	}

	.top {
		// background-color: #fff;
	}

	.popup-info {
		color: #fff;
		background-color: #74736e !important;
	}
</style>
